<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NL2SQL</title>
	<link href="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="enrollment/css/default.css">
	<link rel="stylesheet" type="text/css" href="enrollment/css/styles.css">
</head>
<body>
	<header class="htmleaf-header">
		<h1>NL2SQL <span>注册界面</span></h1>
	</header>
	<form action="" method="post">
		<div class='login'>
			<div class='login_title'>
			  <span>Login to your account</span>
			</div>
			<div class='login_fields'>
			  <div class='login_fields__user'>
				<div class='icon'>
				  <img src='enrollment/img/user_icon_copy.png'>
				</div>
				<input placeholder='Username' type='text' name="usr">
				  <div class='validation'>
					<img src='enrollment/img/tick.png'>
				  </div>
				</input>
			  </div>
			  <div class='login_fields__password'>
				<div class='icon'>
				  <img src='enrollment/img/lock_icon_copy.png'>
				</div>
				<input placeholder='Password' type='password' name="passwd">
				<div class='validation'>
				  <img src='enrollment/img/tick.png'>
				</div>
			  </div>

				<div class='login_fields__password'>
				<div class='icon'>
				  <img src='enrollment/img/lock_icon_copy.png'>
				</div>
				<input placeholder='Password' type='password' name="passwd2">
				<div class='validation'>
				  <img src='enrollment/img/tick.png'>
				</div>
			  </div>

			  <div class='login_fields__submit'>
				<input type='submit' value='enrollment'>
				<div class='forgot'>
				  <a href="login">登录</a>
				</div>
			  </div>
			</div>
			<div class='success'>
			  <h2>Authentication Success</h2>
			  <p>Welcome back</p>
			</div>
			<div class='disclaimer'>
				<h2><p>{{msg}}</p></h2>

			  <p>请输入您的账号密码以注册界面，进行以后的操作</p>

			</div>
		  </div>
	</form>

	<div class='authent'>
	  <img src='enrollment/img/puff.svg'>
	  <p>Authenticating...</p>
	</div>
	<script src='enrollment/js/stopExecutionOnTimeout.js?t=1'></script>
	<script src="enrollment/js/jquery-2.1.1.min.js"></script>
	<script src="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.js"></script>
	<script>
	$('input[type="submit"]').click(function () {
	    $('.login').addClass('test');
	    setTimeout(function () {
	        $('.login').addClass('testtwo');
	    }, 300);
	    setTimeout(function () {
	        $('.authent').show().animate({ right: -320 }, {
	            easing: 'easeOutQuint',
	            duration: 600,
	            queue: false
	        });
	        $('.authent').animate({ opacity: 1 }, {
	            duration: 200,
	            queue: false
	        }).addClass('visible');
	    }, 500);
	    setTimeout(function () {
	        $('.authent').show().animate({ right: 90 }, {
	            easing: 'easeOutQuint',
	            duration: 600,
	            queue: false
	        });
	        $('.authent').animate({ opacity: 0 }, {
	            duration: 200,
	            queue: false
	        }).addClass('visible');
	        $('.login').removeClass('testtwo');
	    }, 2500);
	    setTimeout(function () {
	        $('.login').removeClass('test');
	        $('.login div').fadeOut(123);
	    }, 2800);
	    setTimeout(function () {
	        $('.success').fadeIn();
	    }, 3200);
	});
	$('input[type="text"],input[type="password"]').focus(function () {
	    $(this).prev().animate({ 'opacity': '1' }, 200);
	});
	$('input[type="text"],input[type="password"]').blur(function () {
	    $(this).prev().animate({ 'opacity': '.5' }, 200);
	});
	$('input[type="text"],input[type="password"]').keyup(function () {
	    if (!$(this).val() == '') {
	        $(this).next().animate({
	            'opacity': '1',
	            'right': '30'
	        }, 200);
	    } else {
	        $(this).next().animate({
	            'opacity': '0',
	            'right': '20'
	        }, 200);
	    }
	});
	var open = 0;
	$('.tab').click(function () {
	    $(this).fadeOut(200, function () {
	        $(this).parent().animate({ 'left': '0' });
	    });
	});
	</script>
</body>
</html>
